<template>
  <view class="weighing-container flex flex-col">
    <view class="flex-1">
      <!-- 头部信息 -->
      <view class="header-card">
        <view class="header-content">
          <wd-row>
            <wd-col :span="12" class="text-left">
              <text class="label">质检单号</text>
            </wd-col>
            <wd-col :span="12" class="text-right">
              <text class="value">{{ qualityData.code }}</text>
            </wd-col>
          </wd-row>
          <wd-row>
            <wd-col :span="12" class="text-left">
              <text class="label">采购单号</text>
            </wd-col>
            <wd-col :span="12" class="text-right">
              <text class="value">{{ qualityData.parentCode }}</text>
            </wd-col>
          </wd-row>
          <wd-row>
            <wd-col :span="12" class="text-left">
              <text class="label">供应商</text>
            </wd-col>
            <wd-col :span="12" class="text-right">
              <text class="value">{{ qualityData.supplierName }}</text>
            </wd-col>
          </wd-row>
          <wd-row>
            <wd-col :span="12" class="text-left">
              <text class="label">产品名称</text>
            </wd-col>
            <wd-col :span="12" class="text-right">
              <text class="value">{{ qualityData.productName }}</text>
            </wd-col>
          </wd-row>
        </view>
      </view>

      <!-- 质检信息 -->
      <view class="inspection">
        <view class="stats">
          <view class="stat-item">
            <text class="stat-label">采购重量</text>
            <text class="stat-value">
              {{ qualityData.purchaseQuantity }}{{ formatUnit(qualityData?.unit) }}
            </text>
          </view>
          <view class="stat-item">
            <text class="stat-label">实际重量</text>
            <view class="editable-weight">
              <input
                type="number"
                v-model="actualQuantity"
                :max="qualityData.purchaseQuantity"
                class="weight-input"
              />
            </view>
          </view>
        </view>
        <view class="stats">
          <view class="stat-item">
            <text class="stat-label">合格重量</text>
            <view class="editable-weight">
              <input
                type="number"
                v-model="qualifiedQuantity"
                :max="qualityData.actualQuantity"
                class="weight-input"
              />
            </view>
          </view>
          <view class="stat-item">
            <wd-circle
              v-model="qualifiedRate"
              :text="`合格率：${qualifiedRate.toFixed(2)}%`"
              style="font-size: smaller"
            ></wd-circle>
          </view>
        </view>
        <!-- 照片上传 -->
        <view class="upload-section">
          <view class="upload-title">实物照片</view>
          <!-- 拍照上传 -->
          <wd-upload
            v-model:file-list="productPhotos"
            image-mode="aspectFill"
            :action="actionUrl"
            multiple
            :formData="physicalFormData"
          ></wd-upload>

          <view class="upload-title mt-2">点验收照片（选填）</view>
          <wd-upload
            v-model:file-list="testPhotos"
            :multiple="true"
            image-mode="aspectFill"
            :action="actionUrl"
            :formData="reportFormData"
          ></wd-upload>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <wd-row>
        <wd-col :span="12">
          <wd-button type="info" block :round="false" @tap="handleSave('no')">不通过</wd-button>
        </wd-col>
        <wd-col :span="12">
          <wd-button type="primary" block :round="false" @tap="handleSave('yes')">通过</wd-button>
        </wd-col>
      </wd-row>
    </view>
  </view>
</template>

<script lang="ts" setup>
import qualityApi, { QualityData } from '@/api/quality'
import { ref, computed } from 'vue'
import { useToast } from 'wot-design-uni'
import FileApi from '@/api/file'

import { formatUnit } from '@/utils/unit'
const fileUploadFormData = {
  physical: { bizType: 'physical' },
  report: { bizType: 'report' },
}
const physicalFormData = ref(fileUploadFormData.physical) as any
const reportFormData = ref(fileUploadFormData.report) as any
const toast = useToast()

const actionUrl = computed(() => {
  return FileApi.uploadUrl
})

// 上个页面传递的参数
const qualityData = ref<QualityData>()

// 实际重量
const actualQuantity = ref(qualityData.value?.purchaseQuantity)
// 合格重量
const qualifiedQuantity = ref(qualityData.value?.qualifiedQuantity)
// 合格率
const qualifiedRate = computed(() => {
  return Math.min(100, (qualifiedQuantity.value / actualQuantity.value) * 100 || 0)
})

// 照片
const productPhotos = ref([])
const testPhotos = ref([])

// 保存
const handleSave = async (type: string) => {
  if (!actualQuantity.value) return toast.error('请填写实际重量')
  if (productPhotos.value.length === 0) {
    return toast.error('请上传实物照片')
  }

  const formData = {
    actualQuantity: actualQuantity.value, // 实际数量
    code: qualityData.value?.code, // 质检单号
    id: qualityData.value?.id, // 记录ID
    orderType: 1, // 订单类型, 0=生产单号, 1=采购单号
    parentCode: qualityData.value?.parentCode, // 生产单号
    physicalImage: productPhotos.value.map((item) => JSON.parse(item.response).data), // 实物图片列表
    productCategory: qualityData.value?.productCategory, // 产品分类
    productCode: qualityData.value?.productCode, // 产品代码
    productName: qualityData.value?.productName, // 产品名称
    purchaseQuantity: qualityData.value.purchaseQuantity, // 采购数量
    qualifiedQuantity: qualifiedQuantity.value, // 合格数量
    qualifiedRate: Number(qualifiedRate.value), // 合格率
    unit: qualityData.value?.unit, // 重量单位
    qualityType: 1, // 质检类型 0=产品质检单, 1=原材料质检单
    reportImage: testPhotos.value.map((item) => JSON.parse(item.response).data), // 报告图片
    reportName: '质检报告', // 报告名称
    status: type === 'yes' ? 2 : 3, // 状态 0:待检验 1:检验中 2:检验通过 3:检验不通过
    supplierCode: qualityData.value?.supplierCode, // 供应商代码
    supplierName: qualityData.value?.supplierName, // 供应商名称
  }
  console.log(formData)

  const res = await qualityApi.saveOrUpdateProdReport(formData)
  toast.success('保存成功')

  uni.navigateBack()
}

// 页面加载
onLoad((options) => {
  const item = JSON.parse(options.item)
  qualityData.value = item
  console.log(qualityData.value)
  // 实际重量
  actualQuantity.value = qualityData.value?.actualQuantity
  // 合格重量
  qualifiedQuantity.value = qualityData.value?.qualifiedQuantity
})
</script>

<style lang="scss" scoped>
.weighing-container {
  display: flex;
  flex-direction: column;
  // height: calc(100vh - 100rpx);
  height: 100vh;
}
$primary-color: #3e7bfa;
$secondary-color: #36b8c2;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$background-color: #f5f7fa;
$card-background: #ffffff;
$text-primary: #303133;
$text-secondary: #606266;
$border-color: #ebeef5;
$box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

.header-card {
  padding: 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  .value {
    font-size: 24rpx;
    color: $primary-color;
  }
}
.weight-card,
.record-card {
  padding: 20rpx;
  margin: 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  .value {
    font-size: 24rpx;
    color: $primary-color;
  }
}
.quality-card {
  padding: 20rpx;
  margin: 0 20rpx;
  margin-bottom: 200rpx;
  font-size: 28rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  .value {
    font-size: 24rpx;
    color: $primary-color;
  }
}
.card-title {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 10rpx;
  font-weight: bold;
  color: #333;
  .card-text {
    font-size: 24rpx;
    color: #666;
  }
  .card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.weight-display {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20rpx;
  .weight-text {
    display: flex;
    align-items: center;
    justify-content: center;
    .weight-value {
      font-size: 48rpx;
      font-weight: bold;
      color: $primary-color;
    }

    .weight-unit {
      margin-left: 10rpx;
      font-size: 28rpx;
      color: #666;
    }
  }
  .weight-actions {
    display: flex;
    justify-content: space-around;

    .wd-button {
      margin: 0 10rpx;
    }
  }
}

.record-list {
  .record-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    border-bottom: 1px solid #eee;

    .record-info {
      .record-weight {
        margin-right: 20rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .record-time {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.quality-info {
  .label {
    font-size: 28rpx;
    color: #666;
  }

  .value {
    font-size: 28rpx;
    font-weight: bold;
    color: $primary-color;
  }
}

.upload-section {
  margin-top: 30rpx;

  .upload-title {
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.bottom-buttons {
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  :deep(.wd-row) {
    margin: 0 -10rpx;

    .wd-col {
      padding: 0 10rpx;
    }
  }
}

.delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100%;
}

.inspection {
  padding: 30rpx;
  margin-top: 20rpx;
  background-color: #ffffff;
  .stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    .stat-item {
      width: 100%;
      text-align: center;
      .stat-label {
        font-size: 14px;
        color: #666666;
      }
      .stat-value {
        display: block;
        margin-top: 10rpx;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
      }
      .editable-weight {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10rpx;
        .weight-input {
          height: 50rpx;
          padding: 0 10rpx;
          font-size: 16px;
          font-weight: bold;
          color: #333333;
          text-align: center;
          border: 1px solid #dddddd;
          border-radius: 6rpx;
        }
        .weight-unit {
          margin-left: 10rpx;
          font-size: 14px;
          color: #666666;
        }
      }
    }
  }
  .progress-bar {
    margin-bottom: 30rpx;
    .progress-text {
      margin-bottom: 10rpx;
      font-size: 14px;
      color: #666666;
    }
    .progress-track {
      height: 20rpx;
      overflow: hidden;
      background-color: #f5f5f5;
      border-radius: 10rpx;
      .progress-fill {
        height: 100%;
        background-color: #3e7bfa;
        transition: width 0.3s ease;
      }
    }
  }
}
</style>
